
img {margin-left: 10%;
box-shadow: 6px 6px 6px #656565;
z-index: 1;
}

img:hover {
    z-index: 2;
    transition: 2s ease-out;
}

h2:hover{
    transition-duration: 4s;
    transition-property: color;
}
h3:hover{
    transition-duration: 4s;
    transition-property: color;
}
h2:hover{color:red;}
h3:hover{color:blue;}

.translate:hover {transform: translate(20px, 60px);}
.rotate:hover {transform: rotate(180deg);
transform-origin: center;}
.scale:hover {transform: scale(.3);}
.skew:hover {transform: skew(10deg, 0deg);
border: dotted 2px red;}

.matrix:hover {transform: matrix(1,1,-2,1,0,0);
border: dotted 2px blue;}

.translate3D:hover
{transform: translate3d(200px, 30px, 60px);}

.wow:hover
{transition: height 2s;
height: 800px;
width: 800px;
}

@keyframes color {
    0% {color: red; font-style: italic; border-style: dotted;}
    20% {color: blue;}
    40% {color:yellow;font-style: italic;}
    60% {color:purple;}
    80% {color:orange;font-style: italic;border-style: dotted;}
    100% {color: green}
}

#text
{color:black;
}

#text:hover
{
    animation: color 2s linear infinite;
}


.poem {
    text-align: center;
    height: 300px;
    width: 400px;
    background-image: url(weimei1.jpg);
    background-origin: content-box;
    background-repeat: no-repeat;
    background-size: cover;
    border: solid 5px;
    margin-left: 10%;
}

.poem:hover
{
    animation: bg 5s linear infinite;
}

@keyframes bg {
    0% {background-image: url(weimei1.jpg);}
    20% {background-image: url(weimei2.jpg);}
    40% {background-image: url(weimei3.jpg); color:yellow;}
    60% {background-image: url(weimei4.jpg); color:red;}
    80% {background-image: url(weimei5.jpg); color:orange;}
    100% {background-image: url(weimei1.jpg);}
}
